@import "base.less";
@sumImg: '../img/sum';
@kindColor: #dd3b3f;
@kindGrey: #a7a7a7;
@kindBorder: #d8d3d3;
@kindBorderLight: #efeff4;

/*********************** 綜述頁 ********************/

//關注、分享按鈕
.sum-icon {
	.pa;
	right: .25rem;
    top: .2rem;
}
.sum-icon-follow, .sum-icon-share {
	.fr;
	width: .45rem;
    height: .45rem;
}
.sum-icon-follow {
	background: url("@{sumImg}/follow.png") no-repeat;
	background-size: 100% 100%;
    &.at {
        background: url("@{sumImg}/follow-at.png") no-repeat;
        background-size: 100% 100%;
    }
}
.sum-icon-share {
    width: .4rem;
    height: .4rem;
    margin-top: .03rem;
	background: url("@{sumImg}/share.png") no-repeat;
	background-size: 100% 100%;
    margin-left: .3rem;
}

//導航
.sum-nav {
    display: -webkit-box;
    -webkit-box-pack: justify;
    background-color: #fff;
    z-index: 2;
    border-top: 1px solid @mainBorder;
    a {
        .block;
        box-sizing: border-box;
        width: 20%;
        height: 1rem;
        line-height: 1rem;
        color: #000;
        .tc;
    }
    .at {
        color: @mainTextColor;
        border-bottom: 3px solid @mainTextColor;
    }
    &.six a {
        width: 15%;
        &.width25 {
            width: 25%;
        }
    }
}

//圖片
.ks-ov {
    background-color: #fff;
}
.ks-ov-pic {
    dt {
        width: 4.95rem;
        height: 3.3rem;
        overflow: hidden;
    }
    dd {
        width: 2.5rem;
        height: 3.3rem;
        overflow: hidden;
    }
    img {
        .block;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        border: 1px solid @kindBorderLight;
        object-fit: cover;
    }
}
.ks-ov-big {
    .pr;
    .block;
    width: 100%;
    height: 100%;
}
.ks-ov-sm {
    .pr;
    .block;
    width: 100%;
    height: 1.62rem;
    margin-top: .06rem;
    &:first-child {
        margin-top: 0;
    }
}
.ks-ov-type {
    .pa;
    right: 1px;
    bottom: 1px;
    width: .8rem;
    height: .4rem;
    line-height: .4rem;
    background-color: #d81b3a;
    color: #fff;
    .tc;
}
.ks-ov-info {
    padding: .3rem .2rem;
    dl {
        .fl;
        width: 50%;
    }
    dt {
        font-size: .45rem;
        color: @kindColor;
    }
    dd {
        margin-top: .3rem;
        font-size: .28rem;
        span {
            margin-left: .3rem;
            color: @kindGrey;
            &:first-child {
                margin-left: 0;
            }
        }
    }
}
.ks-ov-yy {
    .fr;
    width: 3rem;
    height: .7rem;
    line-height: .7rem;
    margin-top: .2rem;
    .tc;
    background-color: @mainTextColor;
    color: #fff;
    font-size: .36rem;
}

//年份
.year-url {
    display: block;
    padding: .3rem .2rem;
    background: #fff;
    border-top: 1px solid #EDEDED;
    border-bottom: 1px solid #EDEDED;
    position: relative;
    color: #777777;
    .arrows-icon {
        display: inline-block;
        background: url('../img/go.png');
        background-size: 90%;
        width: .2rem;
        height: .35rem;
        position: absolute;
        top: .3rem;
        right: .3rem;
        background-repeat: no-repeat;
    }
}
.ks-yr {
    margin-top: .2rem;
    background-color: #fff;
}
.ks-yr-title-wrap {
    width: 100%;
    height: .8rem;
    border-bottom: 1px solid @kindBorder;
    overflow: auto
}
.ks-yr-title {
    display: -webkit-box;
}
.ks-yr-title-list {
    text-align: center;
    width: 20%;
    box-sizing: border-box;
    line-height: .8rem;
    height: .8rem;
    &.slt {
        color: @mainTextColor;
        border-bottom: 3px solid @mainTextColor;
    }
}

.ks-yr-content-list {
    &.in {
        .hide;
    }
}
.ks-yr-main {
    .block;
    padding: .2rem .3rem;
    dl {
        .fl;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        height: 1rem;
        -webkit-box-pack: justify;
    }
    h3 {
        font-weight: normal;
        color: #000;
    }
    p {
        color: @kindGrey;
        margin-top: .2rem;
        font-size: .28rem;
        span {
            margin-right: .3rem
        }
    }
}
.ks-yr-right-money {
    .fr;
    line-height: 1rem;
    color: @kindColor;
    font-size: .38rem;
    font-weight: normal;
}
.ks-yr-content-all {
    line-height: .8rem;
    .tc;
    color: @mainTextColor;
    &:after {
        .arrow(@w: .15rem, @h: .15rem, @bw: 1px, @c: @mainTextColor, @deg: -135deg);
        display: inline-block;
        margin: 0 0 .1rem .1rem;
    }
    &.at {
        &:after {
            .arrow(@w: .15rem, @h: .15rem, @bw: 1px, @c: @mainTextColor, @deg: 45deg);
            display: inline-block;
            margin: 0 0 0 .1rem;
        }
    }
}

.ks-yr-foot {
    padding: .2rem 0;
    border-top: 1px solid @mainBorder;
    border-bottom: 5px solid @mainBorder;
    background-color: #f7f7fb;
    a {
        .fl;
        box-sizing: border-box;
        width: 50%;
        .tc;
        border-left: 1px solid #ddd;
        color: @mainTextColor;
        &:first-child {
            color: #666;
            border-left: 0;
        }
    }
}

//公用標題
.ks-title {
    padding: 0 .2rem;
    height: .88rem;
    line-height: .88rem;
}
.ks-title-name {
    font-size: .36rem;
}
.ks-title-link {
    .fr;
    color: @mainTextColor;
}
.ks-title-more {
    .fr;
    color: #666;
}

//編輯測評
.ks-bj {
    margin-top: .2rem;
    background-color: #fff;
}
.ks-bj-nav {
    display: -webkit-box;
    box-sizing: border-box;
    width: 100%;
    padding: .3rem 0;
    border: 1px solid @mainBorder;
    border-left: 0;
    border-right: 0;
    overflow: auto;
}
.ks-bj-nav-link {
    .block;
    padding: 0 .2rem;
    border-left: 1px solid @mainBorder;
    color: @mainTextColor;
    &:first-child {
        border-left: 0;
    }
}
.ks-bj-list {
    padding: 0 .2rem;
}
.ks-bj-list-link {
    .pr;
    .block;
    padding: .3rem .5rem .3rem 0;
    border-bottom: 1px solid @mainBorder;
    font-size: .3rem;
    &:after {
        .pa;
        .arrow(@w: .2rem, @h: .2rem, @bw: 2px, @c: @kindGrey, @deg: 135deg);
        top: 50%;
        right: 0;
        margin-top: -.08rem;
    }
}
.ks-bj-list-content {
    .block;
    padding-bottom: .3rem;
    margin-top: .3rem;
    font-size: .3rem;
    p {
        padding: .1rem 0;
        line-height: .6rem;
    }
    span {
        color: @mainTextColor;
    }
}

//車友評價
.ks-cmt {
    padding-bottom: .2rem;
    margin-top: .2rem;
    background-color: #fff;
}
.ks-cmt-list {
    padding: 0 .2rem;
}
.ks-cmt-more {
    .block;
    width: 100%;
    height: .8rem;
    line-height: .8rem;
    .tc;
    border: 1px solid @mainBorder;
    color: #666;
}

//經銷商列表
.ks-dealder {
    margin-top: .2rem;
    background-color: #fff;
}

//競爭車款
.ks-compete {
    padding-bottom: 1rem;
    margin-top: .2rem;
    background-color: #fff;
}
.ks-compete-list {
    padding-left: .2rem;
}

//PK對比
.ks-pk {
    .fx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    right: .2rem;
    bottom: .3rem;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    .tc;
    color: #fff;
    background-color: rgba(44, 87, 156, 0.9);
    span {
        .pa;
        left: .1rem;
        top: .1rem;
        width: .2rem;
        height: .2rem;
        background-color: @kindColor;
        border-radius: 50%;
    }
}
//图片详情列表
.photo-deital-section {
    margin-bottom: .2rem;
}
.photo-detail-list {
    display: inline-block;
    width: 30%;
    margin: 0 1.57%;
    margin-top: .3rem;
    img {
        width: 100%;
    }
}
//图片详情样式
.photo-bg {
    background: #000;
    margin-top: -0.6px;
}
.hd-black:before {
    border-color: #fff !important;
}
.hd-main-color {
    color: #fff;
}
.hd-border {
    border: none;
}
.photo-nav {
    display: flex;
    color: #a0a0a0;
    height: 1rem;
    line-height: 1rem;
    .nav {
        flex: 1;
        text-align: center;
        font-size: .3rem;
        b {
            font-weight: 100;
            font-size: .2rem;
        }
    }
    .select-nav {
        color: #fff;
    }
}
.photo-big {
    margin-top: .3rem;
    height: 5rem;
    .slider-list {
        height: 5rem !important;
    }
    .photo-center {

    }
    img {
        width: 100%;
    }
}
    .photo-counts {
        font-size: .3rem;
        color: #fff;
        text-align: center;
        height: 1rem;
        line-height: 1rem;
    }
.photo-thumbnail {
    width: 100%;
    display: block;
    position: fixed;
    bottom: 0rem;
    left: 0rem;
    .photo-thumbnail-item {
        display: inline-block;
        width: 2.37rem;
   }
    img {
        width: 100%;
    }

}
.tp-thumbnail {
    .slider-list {
        height: 1.6rem !important;
    }
}
.button-share-icon {
    display: inline-block;
    background: url('../img/share.png');
    width: .6rem;
    height: .8rem;
    position: absolute;
    right: 0;
    top: .2rem;
    background-size: 70%;
    background-repeat: no-repeat;
}
.none {
    display: none;
}
.article-lists {
    background: #fff;
}

/*
    咨询页面
 */
.second-nav {
    background: #f1f1f1;
    border-top: 1px solid #e2e2e2;
    .nav-name {
        display: inline-block;
        width: 1rem;
        text-align: center;
        padding: .2rem .15rem;
        font-size: .25rem;
        color: #9e9e9e;
    }
    .select-color {
        color: #6693dc;
    }
}

/*sum/kindarticle*/

















